<template>

  <div class="box">
    <template v-for="item in listData">

      <!--      <div class="messageBox" v-if="item.messageType=='论坛'">-->
      <div class="messageBox" @click="goDetail(item)">
        <div class="left">


          <van-image
            round
            width="60px"
            height="60px"
            :src="item.reserve4"
          />
        </div>
        <div class="right">
          <div>昵称：{{ item.reserve2 }}</div>
          <div>时间：{{ item.reserve3 }}</div>
          <div>回复：<span v-html="setArr(item.messageContent)"></span></div>
          <div class="innerBox">
            <div>
              <div>模块：{{ item.messageType }}</div>
              <div>动作：{{ item.action }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-if="total>listData.length" style="text-align: center;line-height: 40px;font-size: 16px" @click="queryForm.pageNum++,getMessageList()">
      加载更多
    </div>
    <div v-else style="text-align: center;line-height: 40px;font-size: 16px">
      加载完毕
    </div>
  </div>

</template>
<script>
import {getMessageList} from "@/api/homePgae";
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      queryForm: {
        pageSize: 10,
        pageNum: 1,

      },
      listData: [],
      total: 0
    }
  },
  mounted() {
    this.getMessageList()
  },
  computed: {
    ...mapGetters(["userId"])
  },
  methods: {
    getMessageList() {
      this.queryForm.userId = this.userId
      getMessageList(this.queryForm).then(res => {
        if (res.code == 200) {
          this.listData.push(...res.rows)
          this.total = res.total
        }
      })
    }

    ,
    setArr(item) {
      if (item) {

        return item.replace(/\[|\]/g, '');
      }
    },
    goDetail(item){
      if(item.messageType=='阅卷'){
        this.$router.push('/markingPapers/Q&Aarea/markingPapers/Q&Aarea/detail?id='+item.targetId)

      }
    }
  }
}
</script>
<style lang="scss" scoped>
.messageBox {
  padding: 15px 10px;
  display: flex;

  .left {
    width: 80px;

    .el-images {
      width: 50px;
      height: 50px;
    }
  }

  .right {
    font-size: 12px;
    flex: 1;

    > div {
      margin-bottom: 5px;
    }

    .innerBox {
      padding: 10px 10px;
      background: #f5f7fa;
      border: 1px solid #e4e7ed;
      border-radius: 5px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5);

      > div {

        > div:nth-of-type(1) {
          margin-bottom: 3px;
        }
      }
    }
  }
}

.box {
  height: 100%;
  overflow: auto;
}
</style>
